<template>
  <div class="components-input-demo-presuffix">
    <a-input
      v-model:value="cron"
      placeholder="corn表达式"
      @click="openModal"
    >
      <template #prefix>
        <schedule-outlined />
      </template>
      <template #suffix>
        <close-circle-outlined
          v-if="cron"
          title="清空"
          @click="cron = '* * * * * ? *'"
        />
      </template>
    </a-input>
    <JCronModal
      ref="innerVueCron"
      :data="cron"
      @submit="handleOk"
    />
  </div>
</template>
<script>
import JCronModal from "./modal/JCronModal";
export default {
  name: 'JCron',
  components: {
    JCronModal
  },
  props: {
    value: {
      required: false,
      type: String,
      default: '* * * * * ? *'
    }
  },
  data(){
    return {
      cron: this.value,
    }
  },
  watch:{
    value(val){
      this.cron = val
    }
  },
  methods:{
    openModal(){
      this.$refs.innerVueCron.show();
    },
    handleOk(val) {
      this.cron = val
      this.$emit('update:value', val)
    }
  }
}
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}
.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #f5222d;
}
.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
</style>